<template>
  <div id="add_cote_app">
    <el-dialog :title="form.id ? '编辑用户' : '添加用户'" :visible.sync="isShow.flag" width="50%">
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <el-form-item label="上级分类" prop="pid">
          <el-select v-model="form.pid" placeholder="请选择上级分类">
            <el-option :label="'顶级菜单'" :value="0">顶级菜单</el-option>
            <el-option
            :label="cate.catename"
              :value="cate.id"
              v-for="cate in cateList"
              :key="cate.id"
            >{{ cate.catename }}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分类名称" prop="catename">
          <el-input v-model="form.catename"></el-input>
        </el-form-item>
        <el-form-item label="分类图片">
          <el-upload
            v-model="form.img"
            action="#"
            :auto-upload="false"
            list-type="picture-card"
            :on-change="change_img"
            :limit=1
          >
           <img width="100%" v-if="imageUrl" :src="imageUrl" alt="" class="avatar" />
            <i class="el-icon-plus"></i>
           </el-upload>
        </el-form-item>
        <el-form-item label="分类状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="2">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShow.flag = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["isShow", "cateList"],
  data() {
    return {
      form: {
        pid: "",
        catename: "",
        img: "",
        status: "",
      },
      imageUrl: '',
      rules: {
        pid: { required: true, message: "上级分类不能为空", trigger: "blur" },
        catename: {
          required: true,
          message: "分类名称不能为空",
          trigger: "blur",
        },
        status: {
          required: true,
          message: "分类状态不能为空",
          trigger: "blur",
        },
      },
    };
  },
  methods: {
      change_img(file){
          //获取图片对象 upload组件自带 on-change
           
          this.form.img = file.raw
      },
      edit_cate(obj){
        this.form = {...obj}
        this.imageUrl = this.$static_url+this.form.img
      },
    submit() {
      var formData = new FormData();
      console.log(formData);
      //提交请求
      for (let obj in this.form) {
        formData.append(obj, this.form[obj]);
      }
      var url='';
      if(this.form.id){
        url ="/cateedit"
      }else{
        url ="/cateadd"
      }
      this.$axios.post(url, formData).then((res) => {
        console.log(res);
        if (res.code === 200) {
          this.form = {
            pid: "",
            catename: "",
            img: "",
            status: "",
          };
          this.isShow.flag = false;
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.$emit("reload");
        }
      });
    },
  },
};
</script>

<style>
</style>